import React, { useEffect, useState } from 'react'
import { getBannerListFn, updateBannerFlagFn } from '../../api/banner'
import { Table , Image, Switch, Button, Popconfirm } from 'antd'

import { deleteBannerFn } from '../../api/banner'

export default function Index() {


    const [bannerlist,setBannerList] = useState([])

     const [current, setCurrent] = useState(1)

    useEffect(()=>{
        getBannerListFn().then(res=>{
            // console.log(res);
            setBannerList(res.data)
        })
    },[])

    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            render:(v,r,index)=>{
                return <span>{(current - 1) * 5 + index + 1}</span>
            }
        },
        {
            title: '图片',
            dataIndex: 'img',
            key: 'img',
            render:(v)=>{
                return <Image src={v} style={{width:100}} alt="加载失败" />
            }
        },
        {
            title: '是否显示',
            dataIndex: 'flag',
            render:(v,r)=>{
                return <Switch
                    checked={v}
                    onChange={(checked)=>{
                       updateBannerState(checked,r)
                    }}
                ></Switch>
            }
        },
        {
            title: '操作',
            dataIndex: 'action',
            render:(v,r)=>{
                return <div>
                    

                    <Popconfirm
                        title="温馨提示"
                        // description={`您确定要删除 $您确定要删除 ${r.adminname} 吗 吗？`}
                        description={<span>您确定要 <span style={{color:'red'}}>删除</span> 吗</span>}
                        onConfirm={() => { handleDelete(r.bannerid) }}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button type="primary" danger ghost color= "danger" >
                            删除
                        </Button>
                    </Popconfirm>
                </div>
            }
        }
    ]

    const updateBannerState = (checked,r) =>{
        // 调用数据请求更新轮播图显示状态
        updateBannerFlagFn({
            flag: checked,
            bannerid: r.bannerid
        }).then(res=>{
            // console.log(res);
            // 刷新当前页面
           getBannerListFn().then(res => {
                console.log(res);
                setBannerList(res.data)
            })
        })
    }

    // 删除轮播图单条数据
    function handleDelete(bannerid) {
        deleteBannerFn({
            bannerid
        }).then(res=>{
            console.log(res);
            // 刷新当前页面
           getBannerListFn().then(res=>{
                // console.log(res);
                setBannerList(res.data)
        })
        }) 
    }

    return (
        <div>
            <Table 
                dataSource={bannerlist} 
                columns={columns}
                rowKey={'bannerid'} 
                pagination={{
                    current,
                    pageSize: 5,
                    onChange(page) {
                        setCurrent(page)
                    }
                }}   
            />

        </div>
    )
}
